突撃！隣の開発環境 パート5【Goodpatch編】

こんにちは！おおはしりきたけです。パート5の今回は、ユーザーインターフェースの設計･デザインに特化しているGoodpatchさんに突撃させていただきました。その中でも今回は弊社でも利用しているプロトタイプツールProttのチームに突撃してきました。インタビューに答えていただいたのは、エンジニアのひらいさんです。

突撃！隣の開発環境とは

技術事例やノウハウなどは、ブログや勉強会などで共有されることが多いと思います。しかし、各社の開発環境や開発体制などは意外と共有されていないこと多いと思います。ノウハウの流出になるかもしれませんが、それ以上に、より良い開発を目指している会社さん同士で情報交換を行い、良いチーム、良いプロダクトを作っていくという志の会社さんの為の情報共有のための企画になります。開発環境や開発体制なども技術領域によっても変わってくると思いますが、この突撃！隣のシリーズでは様々な会社さんのイケてるツールの使い方や、仕事が捗る開発体制についてインタビューを行っていく予定です。

Goodpatch紹介

どんなことをやっているのか？

Goodpatchさんは「人々のハートを揺さぶるDesign&Productを生み出し世界をより良い方向に前進させる」というビジョンを掲げており、UIデザインに特化したデザインエージェンシーです。家計簿アプリ「MoneyForward」や新築・分譲マンション選びの新サービス『TALKIE（トーキー）』などのUIデザインを手がけてきており、ここ最近でも様々なアプリのUIデザインに携わっています。もちろんUIデザインだけではなく、クライアントの課題を一緒に考えプロダクトの上流から仕事を行っています。UIデザインをスピーディーに行うために自社でProttというプロトタイピングツールをリリースしています。また先日ドイツのベルリンにもオフィスを作ったりしています。

開発環境について

まずは、Goodpatchさんの開発環境について色々と伺っていこうかと思います。

システム構成

Prottのシステム構成ですが、開発環境はAWSを利用しているとのことですが、本番環境はオンプレで構築されているとのことでした。サーバーサイドの言語はRubyを利用しており、RubyのフレームワークはRailsが利用されています。現在はWebとiOSとMacアプリ(Webベース)がリリースされており、Android版、Macアプリ(ネイティブ版)は現在開発中で、Android版が近々リリースされるとのことでした。

開発端末

開発端末は、MacBook Proが支給されており、ディスプレイはThunderbolt Displayでした。スペックは利用用途によって変えることができるとのことでした、オフィスですが、作業スペースも広く、椅子も統一されていたりと非常にオシャレなオフィスでした！

写真は、本社の近くにあるProttチームのオフィス。

コミュニケーションツール

プロジェクトを円滑にするために様々なコミュニケーションツールを使うことになります。チャットやチケットの管理、仕様の共有などどのように行っているのか聞いてみました。

チャットツール

定番のSlackを利用しており、チャンネル数は200チャンネルくらいあるということです。不要なチャンネルは、定期的に気がついた人がお掃除をしたりしているとのことでした。開発系のチャンネルはbotや、Pivotal Tracker、Capistranoなどのツールとも連携しています。

プロジェクト管理ツール

タスクの管理はTrelloで行っており、ProttのフィードバックなどはPivotal Trackerで管理をしているとのことでした。昔は人も少なかったのでタスクカンバンで行っていたとのことですが、こちらのツールを導入し、試行錯誤しながらより良い使い方を考えているとのことでした。

仕様の共有方法

UIデザインなどはProttを使って共有しているとのことでした。エンジニア間での仕様の共有はQiitaTeamに記載して共有などを行っているとのことでした。プロダクトチームでフロアが一緒で席も近いので、細かいUIの調整や仕様の話に関しては、自席で話しながら決めていくことも多いとのことでした。スピード感が必要なプロダクト開発の場合コミュニケーションの取り方というのは直接のほうが早いと思います。

リポジトリ

こちらも定番のgithubです。全体のリポジトリ数は66個ほどあり、Prottプロダクトのリポジトリは15程度ということでした。iOS,Android,Web,ServerAPI以外にもランディングページやツール群などもgithub上で管理しているとのことでした。

デザインツール

ワイヤーやデザインパーツなどは、Sketchを利用することが多く、プロトタイプツールは、もちろんProttを利用しているということです。エンジニアさんも含め基本的にSketchを入れているとのことで、なぜSketchなのかを聞いてみたところ、Adobeのツールより学習コストが低く、SketchファイルでUIのデザイン確認できたりするので、非常に便利とのことでした。Sketchで使えるプラグインなどの話を聞いてみたところ、Paddingの数字などを表示できるZeplinというプラグインを教えていただきました。

またProttはワイヤーフレームやプロトタイプなどで利用することが多いですが、デザインガイドラインなどもProttに書いて共有しているという話が非常に興味深かったです。弊社もデザインガイドラインなどの作成を行うことが多いですが、PDFなどで共有していることが多く、ProttにすることでUIに関する情報は全てProttに収まるので凄く効果的な使い方だなと思います。

開発体制

開発チーム

GoodpatchさんのProttチームの体制は以下になります。

• エンジニア
  • サーバサイド：2名
  • フロントエンド：3名
  • iOS：1名
  • Android：1名
  • MacApp：1名
  • インフラエンジニア：1名
• デザイナ：2名
• その他
  • PM：1名
  • Sales：1名
  • Growth：1名
  • User Support：1名
  • 海外サポート：1名(カナダ)

開発プロセスについて

朝は本社で全社の朝礼、夕礼を行っており、1日のタスク共有などはProttチームで朝会を行っているとのことでした。Prottは社長の土屋さんがプロダクトオーナーで、開発プロセスとしては、直近2ヶ月のやる事を決めて、優先順位を決めてタスクを落として作業を決めていくとのことでした。

コミュニケーションについて

上記でも仕様の共有方法などはProttを利用して共有したりしているということで、Goodpatchさん自体がProttのヘビーユーザーでもあるため、ツールを使ってよりよい開発を行っていけるとのことでした。最近は社員も急激に増えてきており、入社後の「Getting Started 」ページなどもQiitaTeam書かれていたりしますが、最後に入社した人が、フォローやメンテンナンスを行ったりというルールを設けており、ドキュメントがドンドン古くなってしまうということが防げています。また直接やSlackでのコミュニケーションも多いですが、打合せなどは必ず議事録に残すなど、当たり前の事が当たり前にできていると感じました。

写真はサンボル2台を豪華に使ってペアプロをやっているエンジニアのひらいさん

CI環境

ProttのCI環境としてはTravis CIを使っているとのことで、サーバーのデプロイはCapistranoでデプロイを行っているとのことでした。

テストについて

サーバー側のテストコードはRSpecで書かれていますが、アプリ側の部分は、UIメインかつUIの変化が早いため、テストコードは用意しておらず。品質を保つためにテスト期間を十分にとってテストを行うということをやっているとのことでした。開発をやっていると一番圧縮されがちなテスト工程ですが、品質を保つためには各工程をしっかりやっていくことが、本当に重要だと思っています。

その他

PizzaPatch

毎月行われており、会社のビジョンや数字を共有する会だそうです。終わった後に、 ピザと寿司を食べているとのことですが、最近ちょっと飽きてきたみたいですw

シャッフルランチ

社員同士で交流するため、2週間に1回、Slackのbotに参加表明するとbotがシャッフルして抽選してランチに行くチームを決めます。完全確率の抽選なので、たまに同じメンバーで行くこともあったりするみたいです。

写真は、本社スペースです。ここでPizzaPatchが行われたり、卓球が行われたりしているようです。クラスメソッドとも以前対戦していただきました！！

今回登場したツール

コミュニケーション

• チャット：Slack
• リポジトリ：github
• タスク管理：Trello
• チケット管理：PivotalTracker
• 仕様共有：Qiita Team
• 仕様共有：Prott

自動化

• CI環境：Travis CI
• デプロイツール：Capistrano

テスト

• Ruby：RSpec

デザイン

• ドロワーツール：Sketch
• デザインガイドライン(プラグイン)：Zeplin

※Goodpatchさんでは、上記以外にも様々なツールを利用しております。上記はインタビュー時に伺った内容のものを記載しています。

まとめ

第5回目はGoodpatchさんにインタビューさせてもらいました。「人々のハートを揺さぶるDesign&Productを生み出し世界をより良い方向に前進させる」というビジョンを掲げ、そのビジョンの通りProttというプロダクトが生み出され、共感したメンバーが一気に増えているという印象でした。また、議事録やテスト期間をしっかりとるという当たり前のことをしっかりやっているという印象があり、スピードと品質のバランスが取れていると感じました。

最後に写真を取らせていただきました。左からひらいさん、そして私です。お忙しいところありがとうございました！！

参考リンク

http://goodpatch.com/

https://prottapp.com/ja/

http://www.slideshare.net/sada_h/ui-48329403